<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>上传二货</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
        <!-- Place favicon.ico in the root directory -->

		<!-- CSS here -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/fontawesome-all.min.css">
        <link rel="stylesheet" href="css/default.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/swiper-bundle.min.css">
        <link rel="stylesheet" type="text/css" href="./ElementUI/index.css"/>
        <style>
            html,body{
                position: relative;
                height: 100%;
                background-color: #0a8e9d;
            }
            *{
                margin:0;
                padding:0;
            }
            .swiper-container {
                width: 28%;
                height: 24rem;
            }
            .swiper-slide {
                text-align: center;
            }
            .swiper-slide div{
                width:86%;
                border-radius:7px;
                margin:10px 0 10px 4%;
            }
            .swiper-slide div img{

                width:100%;
                display:block;
                border-radius:7px;
            }
            .slide-item{
                border-radius: 45px;
                /*box-shadow:0px 2px 4px 2px rgb(234, 234, 234);*/
            }
            .item-label .el-form-item__label{
                margin-top: 1.2rem;
            }
            .item-start .el-form-item__label{
                margin-top: 0.5rem;
            }
            .el-textarea__inner{
                height: 8rem;
            }
            .el-form-item{
                height: 4rem;
            }
        </style>
    </head>
    <body>

        <!-- preloader -->
        <div id="preloader">
            <div id="loading-center">
                <div id="loading-center-absolute">
                    <div class="object" id="object_one"></div>
                    <div class="object" id="object_two"></div>
                    <div class="object" id="object_three"></div>
                </div>
            </div>
        </div>
        <!-- preloader-end -->

        <!-- header -->
        <header>
            <div id="header-sticky" class="main-header-area">
                <div class="container">
                    <div class="row align-items-center" style="display: flex;flex-direction: row;justify-content: space-between">
                        <div class="col-lg-3 col-md-4">
                            <div class="logo">
                                <a href="index.html"><img src="img/logo/logo.png" alt="logo"></a>
                            </div>
                        </div>
                        <div class="col-lg-4 text-right d-none d-lg-block">
                            <div class="main-menu d-inline-block">
                                <nav id="mobile-menu">
                                    <ul>
                                        <li><a href="#">我的二货</a></li>
                                        <li><span style="color: white">上传二货</span></li>
                                    </ul>
                                </nav>
                            </div>
                            <div class="shop-cart-icon s-shop-cart-icon d-none d-xl-inline-block">
                                <a href="#"><img src="img/icon/shop_cart.png" alt="icon"></a>
                                <span>10</span>
                            </div>
                            <a href="#" class="ml-1 shop_cart" style="color: whitesmoke;">购物车</a>
                        </div>
                        <div class="col-12">
                            <div class="mobile-menu"></div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- header-end -->

        <!-- main-area -->
        <main>
            <!-- shop-area -->
            <section class="shop-area shop-area-p pt-40 pb-70" id="app">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide slide-item" style="background-color: #fff;">
                            <div style="margin-left:2.5rem;display: flex;flex-direction: column;justify-content: center;">
                                    <div class="pt-4">
                                        <p>完成后，鼠标按住白色卡片向左滑动</p>
                                        <div style="display: flex;flex-direction: row;justify-content: space-between;">
                                            <span class="label label-default ml-3" style="line-height: 3rem">商品名:</span>
                                            <input type="text" class="form-control ml-1" style="width: 12rem" placeholder="请输入商品名">
                                        </div>
                                    </div>
                                    <div class="pb-9">
                                        <el-upload list-type="picture-card" class="upload-demo" drag :on-change="changelist"
                                                   action="/upload" :limit="1" :auto-upload="false" :on-success="geturl" ref="upload" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" accept="image/jpeg,image/gif,image/png">
                                            <i class="el-icon-upload"></i>
                                            <p>点击上传你的商品图片</p>
                                        </el-upload>
                                        <el-dialog :visible.sync="dialogVisible">
                                            <img width="100%" :src="dialogImageUrl" alt="">
                                        </el-dialog>
                                    </div>
                            </div>
                        </div>
                        <div class="swiper-slide slide-item" style="background-color: #d0ffd1;">
                            <div style="margin-top: 2rem;">
                                <p>没想到吧，我还可以向左划</p>
                            </div>
                            <div style="margin-top: 1rem;">
                                <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                                    <el-form-item label="宝贝打星:" class="item-start">
                                        <el-rate style="margin-left: -3rem" v-model="stars"></el-rate>
                                    </el-form-item>
                                    <el-form-item label="商品类型:" class="item-label">
                                        <el-select style="margin-top: -0.1rem;margin-left: -0.5rem" v-model="value" filterable placeholder="请选择">
                                            <el-option
                                                    v-for="item in options"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="预期价格:" class="item-label">
                                        <el-input v-model="formLabelAlign.name"></el-input>
                                    </el-form-item>
                                    <el-form-item label="实际价格:" class="item-label">
                                        <el-input v-model="formLabelAlign.region"></el-input>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                        <div class="swiper-slide slide-item" style="background-color: #ffc5f2;">
                            <div style="margin:0 auto; margin-top: 2rem">
                                <span>这是最后一项，填完就可以提交啦！！！</span>
                            </div>
                            <el-form :label-position="labelPosition" label-width="80px">
                                <el-form-item label="宝贝描述:" class="item-label">
                                    <el-input type="textarea" v-model="pingjia" placeholder="请输入您对宝贝的描述"></el-input>
                                </el-form-item>
                                <el-form-item label="商家备注:" class="item-label" style="margin-top: 5rem">
                                    <el-input type="textarea" v-model="beizhu" placeholder="您希望买家如何联系到您呢？"></el-input>
                                </el-form-item>
                            </el-form>
                            <div style="margin:0 auto;margin-top: 12rem;display: flex;flex-direction: row;justify-content: center">
                                <el-button type="primary">提交</el-button>
                                <div style="width: 1.1rem"></div>
                                <el-button type="primary">重置</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- shop-area-end -->
        </main>
        <!-- main-area-end -->

        <!-- footer -->
        <footer class="footer-area black-bg">
            <div class="footer-top-wrap pt-95 pb-40">
                <div class="container">
                    <div class="row" style="display: flex;flex-direction: row;justify-content: space-around;align-items: center">
                        <div class="col-lg-3 col-sm-6">
                            <div class="footer-widget mb-50">
                                <div class="fw-logo mb-15">
                                    <a href="index.html"><img src="img/logo/w_logo.png" alt="Logo"></a>
                                </div>
                                <div class="footer-text">
                                    <p>我们是一群热爱开发的团体，相聚在南工，相聚在云端就业工作室，我们的理念是：虽然我们还无法改变互联网，但我们一直在努力优化着</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 pr-50">
                            <div class="footer-widget mb-50">
                                <div class="fw-title mb-20">
                                    <h4>友情链接</h4>
                                </div>
                                <div class="fw-link">
                                    <ul>
                                        <li><a href="http://www.nit.edu.cn/" target="_blank"><i class="fas fa-angle-right"></i> 南昌工程学院</a></li>
                                        <li><a href="http://envo.nit.edu.cn/" target="_blank"><i class="fas fa-angle-right"></i> 南昌工程学院招生就业处</a></li>
                                        <li><a href="http://yunduanoffice.com/" target="_blank"><i class="fas fa-angle-right"></i> 云端就业工作室官网</a></li>
                                        <li><a href="http://yunduanoffice.com/" target="_blank"><i class="fas fa-angle-right"></i> 开发者技术博客链接①</a></li>
                                        <li><a href="https://huyong.cloud/" target="_blank"><i class="fas fa-angle-right"></i> 开发者技术博客链接②</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 pr-40">
                            <div class="footer-widget mb-50">
                                <div class="fw-title mb-20">
                                    <h4>联系我们</h4>
                                </div>
                                <div class="fw-contact">
                                    <ul>
                                        <li><i class="fas fa-phone"></i> 151 - 8004 - 3828</li>
                                        <li><i class="far fa-envelope"></i> 1352834940@qq.com</li>
                                        <li><i class="fas fa-map-marker-alt"></i> 南昌工程学院</li>
                                        <li><i class="fas fa-fax"></i> 暂无</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- footer-end -->

		<!-- JS here -->
        <script src="js/vendor/jquery-1.12.4.min.js"></script>
<!--        <script src="js/popper.min.js"></script>-->
<!--        <script src="js/bootstrap.min.js"></script>-->
        <script src="js/isotope.pkgd.min.js"></script>
        <script src="js/slick.min.js"></script>
        <script src="js/jquery.meanmenu.min.js"></script>
<!--        <script src="js/ajax-form.js"></script>-->
        <script src="js/wow.min.js"></script>
        <script src="js/aos.js"></script>
        <script src="js/jquery.nice-select.min.js"></script>
        <script src="js/jquery.counterup.min.js"></script>
<!--        <script src="js/jquery.waypoints.min.js"></script>-->
        <script src="js/jquery.scrollUp.min.js"></script>
        <script src="js/imagesloaded.pkgd.min.js"></script>
        <script src="js/jquery.magnific-popup.min.js"></script>
<!--        <script src="js/plugins.js"></script>-->
        <script src="js/main.js"></script>
        <script src="js/swiper-bundle.min.js"></script>
        <script src="js/swiper-bundle.min.js"></script>
        <script type="text/javascript" src="./js/vue.js"></script>
        <script type="text/javascript" src="./ElementUI/index.js"></script>
        <script>
            window.onload = function () {
                var swiper = new Swiper('.swiper-container', {
                    watchSlidesProgress : true,  //查看slide的progress
                    resistanceRatio : 0, //禁止边缘移动
                    on: {
                        init: function(){
                            slides = this.slides
                            for(i=0; i< slides.length; i++){
                                slide = slides.eq(i)
                                slide.css('zIndex', 100-i);  //设置slide的z-index层级
                            }
                        },

                        resize: function(swiper){
                            swiper.update()
                        },

                        setTranslate: function(){
                            slides = this.slides
                            offsetAfter = this.width*0.95 //每个slide的位移值
                            for(i=0; i< slides.length; i++){
                                slide = slides.eq(i)
                                progress = slides[i].progress

                                if(progress <= 0){  //右边slide位移
                                    slide.transform('translate3d('+(progress)*offsetAfter+'px, 0, 0) scale('+(1 - Math.abs(progress)/20)+')');
                                    slide.css('opacity',(progress+3));    //最右边slide透明
                                }

                                if(progress > 0){
                                    slide.transform('rotate('+ (-progress)*5+'deg)');   //左边slide旋转
                                    slide.css('opacity',1 - progress);    //左边slide透明
                                }
                            }
                        },
                        setTransition: function(swiper, transition) {
                            for (var i = 0; i < this.slides.length; i++) {
                                var slide = this.slides.eq(i)
                                slide.transition(transition);
                            }
                        },
                    },
                });
            }
        </script>

        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    labelPosition: 'right',
                    formLabelAlign: {
                        name: '',
                        region: '',
                        type: ''
                    },
                    stars:null,
                    pingjia:'',
                    beizhu:"",
                    //复选框
                    options: [{
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶'
                    }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    }, {
                        value: '选项4',
                        label: '龙须面'
                    }, {
                        value: '选项5',
                        label: '北京烤鸭'
                    }],
                    value: '',
                    //图片
                    dialogImageUrl: '',
                    dialogVisible: false
                },
                created() {

                },
                methods:{
                    //图片
                    handleRemove(file) {
                        this.$refs.upload.clearFiles();
                        $(".el-upload--picture-card").css("display","block");
                        console.log(file);
                    },
                    handlePictureCardPreview(file) {
                        this.dialogImageUrl = file.url;
                        this.dialogVisible = true;
                    },
                    changelist(file){
                        if (this.$refs.upload){
                            $(".el-upload--picture-card").css("display","none");
                        }
                    },
                    geturl(res){
                        console.log(res);
                        console.log(this.fogFrom.url);
                        if (this.fogFrom.mid===0||this.fogFrom.url===""||this.fogFrom.level===3){
                            layer.msg('请将信息完整输入!', {
                                time: 2000
                            });
                            return false;
                        }
                        setTimeout(() => {
                            this.$http.post('/admin/FogLevelAdd',this.fogFrom,{emulateJSON:true}).then(res => {
                                layer.msg('添加成功!', {
                                    time: 2000
                                });
                                setTimeout(() => {
                                    location.href = "/admin/fog.html";
                                }, 1000);
                            });
                        }, 5000);
                    }
                }
            })
        </script>
    </body>
</html>
